<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
    </script>
    <style>
        video::-webkit-media-controls {
            display: none !important;
        }

        #box {
            position: relative;
            display: flex;
            display: -webkit-box;
            margin: auto;
            width: 80vw;
            height: 80vh;
        }

        #box #i1,
        #box #i2 {

            left: 45%;
        }

        #box #i3 {
            left: 35%;
        }

        #box #i4 {
            left: 55%;
        }

        #box #i5 {
            left: 65%;
        }

        #box #i6 {
            left: 25%;
        }

        #box #i7 {
            left: 75%;
        }

        #box #video1 {
            width: 100%;
            height: 100%;
            margin: auto;
        }

        .glyphicon {
            position: absolute;
            top: 400px;
            font-size: 30px;
            color: blueviolet;
        }
    </style>
</head>

<body>

    <div id="box">
        <!-- 开始暂停 -->
        <span class="glyphicon glyphicon-play" id="i1"></span>
        <!-- <span class="glyphicon glyphicon-pause" id="i2" style="display:none;"></span> -->
        <!-- 左进 -->
        <span class="glyphicon glyphicon-fast-backward" id="i3"></span>
        <!-- 右进 -->
        <span class="glyphicon glyphicon-fast-forward" id="i4"></span>
        <!-- 静音 -->
        <span class="glyphicon glyphicon-volume-up" id="i5"></span>
        <!-- 前一个视频 -->
        <span class="glyphicon glyphicon-step-backward" id="i6"></span>
        <!-- 后一个视频 -->
        <span class="glyphicon glyphicon-step-forward" id="i7"></span>


        <video width="320" height="240" controls id="video1">
            <source src="./imges/3.mp4" type="video/ogg">
        </video>

    </div>
    <script>
        var myVid = document.getElementById("video1");
        /* 开始暂停 */
        $("#i1").on("click", function () {
            //console.log(event)
            if (this.className == "glyphicon glyphicon-play") {
                this.className = "glyphicon glyphicon-pause"; //暂停图标换开始图标
                myVid.play(); //视频开始播放
            } else {
                this.className = "glyphicon glyphicon-play"; //开始图标换暂停图标
                myVid.pause(); //视频暂停播放
            }
        });

        /*  空格键实现控制 （提示：onkeydown） */
        document.body.onkeydown = function () {
        if (event.keyCode == 32) {    //点击空格时
            if(!myVid.paused){ //当前视频没有暂停
                myVid.pause(); //视频暂停播放
                // 开始按钮变成结束按钮
                document.getElementById("i1").className = "glyphicon glyphicon-play";
            }else{
                myVid.play(); //视频开始播放
                // 结束按钮变成开始按钮
                document.getElementById("i1").className = "glyphicon glyphicon-pause";
            }
        }
    }

         /* 静音 */
        $("#i5").on("click", function () {
            if (this.className == "glyphicon glyphicon-volume-up") {
            myVid.muted = true; //有声音改静音
            this.className = "glyphicon glyphicon-volume-off"; //改静音图标
        } else {
            myVid.muted = false;
            this.className = "glyphicon glyphicon-volume-up"; //改有声音图标
        }
          
        });

        var img = ["./imges/2.mp4","./imges/3.mp4"];
        var index = 0;
        /* 前一个视频 */
        $("#i6").click(function(){
            document.getElementById("i1").className = "glyphicon glyphicon-play";
              $(myVid).prop("src",img[index])
               index--        
              if(index<0){ 
                  index=1
              }
          })
          $("#i7").click(function(){
            document.getElementById("i1").className = "glyphicon glyphicon-play";
              console.log(img[index])
              $(myVid).prop("src",img[index])
              index = index==1?0:index+1
          })
    </script>
</body>

</html>